<template>
	<view class="container">
		<view class="btn">
			<button type="primary" @click="handlePublish" size="mini">发表</button>
		</view>
		<view class="content">
			<textarea v-model="content" cols="30" rows="10" placeholder="这一刻的想法..."></textarea>
		</view>
		<view class="imglist">
			<!-- 上传图片的缩略图 -->
			<view class="imgs" v-if="imgList.length" v-for="item in imgList" :key="item">
				<image mode="aspectFill" class="img" :src="item"></image>
			</view>
			<view class="add" @click="chooseimg">
				+
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue"

	import { addCommentApi } from "@/api/comment.js"

	import useUser from "@/store/users.js"

	let userStore = useUser()

	//选择图片后 临时路径
	let imgList = ref([])
	//上传给后台的图片字段,存储上传成功的图片地址
	let imgListParam = []
	//评论的内容
	let content = ref()

	//发布评论的方法
	let handlePublish = async () => {

		uni.showToast({
			title: "正在发布",
			icon: "loading"
		})
		try {
			let res = await addCommentApi({
				reply_unid: userStore.userInfo.unid,
				content: content.value,
				imgList: imgListParam
			})
			console.log('---发布结果');
			uni.hideLoading()
	
			//跳转到社区页面
			uni.switchTab({
				url: "/pages/tabBar/commnuity/commnuity",		
				success(){
					//将数据全部初始化
					imgList.value = [];
					content.value = ""
					imgListParam = [];
					//下拉更新内容
					uni.startPullDownRefresh()
				}
			})
		} catch (e) {
			console.log(e.toString())
		}
	}
	//选择图片
	let chooseimg = () => {
		uni.chooseImage({
			crop: {
				width: 200,
				height: 200
			},
			success(res) {
				console.log('chooseimg---', res);
				//给临时路径变量赋值,目的是为了让图片能够在本地做一次缩略预览
				imgList.value.push(res.tempFilePaths[0])
				console.log('imgList---', imgList.value)
				//将图片上传到后台
				uni.uploadFile({
					url: `${import.meta.env.VITE_BASE_URL}/upload/uploadImg`, //开发者服务器
					name: "img", //开发者服务器要求传递的key,就是参数名
					filePath: res.tempFilePaths[0], //上传的文件路径,因为服务器问题,一次只能传一张图片
					success: async res => {
						console.log('upload--', res)
						// 每上传成功之后,将上传之后的图片地址push到imgListParam数组中
						let data = JSON.parse(res.data)
						imgListParam.push(data.imgUrl)

						console.log('imgListParam', imgListParam)

						//调用修改用户头像的接口
					},
					fail: (err) => {
						// console.log('uploadFail--', err);
						uni.showToast({
							title: err.toString(),
							icon: 'error'
						})
					}
				})
			}
		})
	}
</script>

<style lang="scss">
	.container {
		padding: 40rpx;
		background: #f7f7f7;
		width: 750rpx;

		.btn {
			text-align: right;
			padding-right: 20px;

			button {
				margin: 20px;
			}
		}

		.content {
			width: 100%;

			textarea {
				width: 90%;
				min-height: 50px;
				color: #000;
			}
		}

		.imglist {
			width: 750rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.img,
			.add {
				width: 160rpx;
				height: 80px;
				margin-left: 10px;

				// border: 1px solid #424242;
			}

			.add {
				line-height: 80px;
				text-align: center;
				font-size: 40px;
				background: #424242;
				color: #fff;
			}
		}
	}
</style>